<template>
  <div>
    <el-card
      class="table-underway-card"
      shadow="hover"
      style="border-radius: 20px"
    >
      <div flex justify-between>
        <!-- 卡片左侧 -->
        <div class="table-card-left" flex>
          <div class="table-img">
            <img :src="tableMessage.img" w-50 h-50 b-rd-10 />
          </div>
          <div class="table-message" flex-col-center ml-10>
            <div class="table-name">
              <h3>{{ tableMessage.name }}</h3>
            </div>
            <div class="start-time" text-12 mt-10>
              <span>开始于：{{ tableMessage.startTime }}</span>
            </div>
          </div>
        </div>

        <!-- 卡片右侧 -->
        <div class="table-card-right">
          <!-- 进度条，待完成 -->
          <div class="tip" w-20 h-5 b-rd-full></div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
const props = defineProps({
  tableMessage: { type: Object, required: true },
});
console.log(props.tableMessage);
</script>

<script>
/**
 * 正在进行中的测评卡片
 * 负责人：唐诗轶
 */
export default {
  name: "TableUnderwayCard",
};
</script>
